<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>正反面切换</title>
        <style>
        	div{
        		width: 300px;
        		height: 400px;
				position: relative;
				margin:50px auto;
				border:1px solid blue;
				perspective: 600px;
        	}
        	div img{
        		position: absolute;
        		left:0;
        		top:0;
        		transition: all 1s ease 0s;
        		backface-visibility: hidden;
        	}
        	div img:first-child{
        		transform: rotateY(180deg);
        	}
        	div img:last-child{
        		/*opacity: .5;*/
        	}
        	div:hover img:first-child{
        		transform: rotateY(360deg);
        	}
        	div:hover img:last-child{
        		transform: rotateY(180deg);
        	}
        </style>
    </head>
    <body>
    	<div>
    		<img src="images/42/backface.jpg" alt="">
    		<img src="images/42/foreface.jpg" alt="">
    	</div>
    </body>
</html>